<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 聊天</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #333;
            background-color: #f1f1f1;
            font-size: 14px;
            line-height: 1.5;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .container {
            padding-bottom: 60px;
            min-height: 100vh;
        }
        
        /* 顶部导航 */
        .header {
            background-color: #41b883;
            color: #fff;
            display: flex;
            align-items: center;
            height: 44px;
            padding: 0 15px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .back-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-icon {
            width: 12px;
            height: 12px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
        }
        
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 聊天内容 */
        .chat-content {
            margin-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 聊天消息 */
        .chat-messages {
            padding: 15px;
        }
        
        .message-item {
            margin-bottom: 15px;
            display: flex;
            align-items: flex-start;
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #ccc;
        }
        
        .message-content {
            max-width: 70%;
        }
        
        .message-bubble {
            padding: 10px 15px;
            border-radius: 18px;
            font-size: 14px;
            position: relative;
            word-break: break-word;
        }
        
        .message-time {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
            margin-left: 5px;
        }
        
        /* 接收的消息 */
        .message-received .message-bubble {
            background-color: #fff;
            color: #333;
            border-top-left-radius: 3px;
        }
        
        /* 发送的消息 */
        .message-sent {
            flex-direction: row-reverse;
        }
        
        .message-sent .message-avatar {
            margin-right: 0;
            margin-left: 10px;
        }
        
        .message-sent .message-bubble {
            background-color: #41b883;
            color: #fff;
            border-top-right-radius: 3px;
        }
        
        .message-sent .message-time {
            text-align: right;
            margin-left: 0;
            margin-right: 5px;
        }
        
        /* 系统提示消息 */
        .system-message {
            text-align: center;
            margin: 15px 0;
        }
        
        .system-tip {
            display: inline-block;
            padding: 5px 10px;
            background-color: rgba(0,0,0,0.1);
            border-radius: 10px;
            font-size: 12px;
            color: #999;
        }
        
        /* 底部输入栏 */
        .chat-input {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #f8f8f8;
            border-top: 1px solid #e0e0e0;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .input-box {
            flex: 1;
            height: 36px;
            background-color: #fff;
            border-radius: 18px;
            padding: 0 15px;
            border: 1px solid #e0e0e0;
            display: flex;
            align-items: center;
        }
        
        .text-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .input-actions {
            display: flex;
            margin-left: 10px;
        }
        
        .action-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #41b883;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }
        
        /* 快速回复 */
        .quick-replies {
            display: flex;
            overflow-x: auto;
            padding: 0 15px 10px;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
        
        .quick-reply {
            display: inline-block;
            padding: 8px 15px;
            background-color: #fff;
            border-radius: 18px;
            margin-right: 10px;
            font-size: 13px;
            color: #666;
            border: 1px solid #e0e0e0;
        }
        
        /* 日期分隔 */
        .date-separator {
            text-align: center;
            margin: 20px 0;
            position: relative;
        }
        
        .date-separator::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background-color: #e0e0e0;
        }
        
        .date-label {
            display: inline-block;
            padding: 0 10px;
            background-color: #f1f1f1;
            position: relative;
            font-size: 12px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="back-btn" onclick="window.history.back()">
                <div class="back-icon"></div>
            </div>
            <div class="header-title">张教练</div>
            <div style="width: 30px;"></div>
        </div>
        
        <!-- 聊天内容 -->
        <div class="chat-content">
            <div class="chat-messages">
                <!-- 日期分隔 -->
                <div class="date-separator">
                    <span class="date-label">2023年6月6日</span>
                </div>
                
                <!-- 系统提示消息 -->
                <div class="system-message">
                    <div class="system-tip">您已成功预约瑜伽私教课程，可以开始沟通了</div>
                </div>
                
                <!-- 接收的消息 -->
                <div class="message-item message-received">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">您好，我是张教练，很高兴为您提供瑜伽私教课程服务。我看到您预约了6月8日14:00的课程，请问您有什么特别的需求或关注点吗？</div>
                        <div class="message-time">14:30</div>
                    </div>
                </div>
                
                <!-- 发送的消息 -->
                <div class="message-item message-sent">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">您好，教练。我是瑜伽零基础，希望能学习一些基本的体式和呼吸方法。</div>
                        <div class="message-time">14:35</div>
                    </div>
                </div>
                
                <!-- 接收的消息 -->
                <div class="message-item message-received">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">没问题，我会为您安排适合零基础的入门课程。我们会从最基础的体式开始，结合正确的呼吸方法，循序渐进地学习。</div>
                        <div class="message-time">14:37</div>
                    </div>
                </div>
                
                <!-- 接收的消息 -->
                <div class="message-item message-received">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">建议您穿着舒适的运动服装，不要吃太饱再来练习。课前1小时最好只喝少量的水。</div>
                        <div class="message-time">14:38</div>
                    </div>
                </div>
                
                <!-- 发送的消息 -->
                <div class="message-item message-sent">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">明白了，谢谢提醒！我需要自己带瑜伽垫吗？</div>
                        <div class="message-time">14:40</div>
                    </div>
                </div>
                
                <!-- 接收的消息 -->
                <div class="message-item message-received">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">不需要，场馆提供专业的瑜伽垫和所有必要的道具。您只需带一条小毛巾即可。</div>
                        <div class="message-time">14:42</div>
                    </div>
                </div>
                
                <!-- 日期分隔 -->
                <div class="date-separator">
                    <span class="date-label">今天</span>
                </div>
                
                <!-- 发送的消息 -->
                <div class="message-item message-sent">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">教练，明天的课程我需要提前到场吗？</div>
                        <div class="message-time">10:15</div>
                    </div>
                </div>
                
                <!-- 接收的消息 -->
                <div class="message-item message-received">
                    <div class="message-avatar"></div>
                    <div class="message-content">
                        <div class="message-bubble">建议您提前10-15分钟到场，可以稍作休息，调整状态。我会在场馆前台等您。</div>
                        <div class="message-time">10:20</div>
                    </div>
                </div>
            </div>
            
            <!-- 快速回复 -->
            <div class="quick-replies">
                <div class="quick-reply">我知道了，谢谢</div>
                <div class="quick-reply">需要带什么用具吗？</div>
                <div class="quick-reply">我可能会迟到一点</div>
                <div class="quick-reply">请问有停车场吗？</div>
                <div class="quick-reply">我需要提前准备什么？</div>
            </div>
        </div>
        
        <!-- 底部输入栏 -->
        <div class="chat-input">
            <div class="input-box">
                <input type="text" class="text-input" placeholder="请输入消息...">
            </div>
            <div class="input-actions">
                <div class="action-btn">发送</div>
            </div>
        </div>
    </div>
    
    <script>
        // 快速回复点击
        document.querySelectorAll('.quick-reply').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelector('.text-input').value = this.textContent;
            });
        });
        
        // 发送按钮点击
        document.querySelector('.action-btn').addEventListener('click', function() {
            const input = document.querySelector('.text-input');
            if (input.value.trim()) {
                // 这里可以添加发送消息的逻辑
                input.value = '';
            }
        });
    </script>
</body>
</html> 